import React from 'react';
import './index.less';
import { Button, Input, DatePicker, Select } from 'antd';

import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
dayjs.extend(customParseFormat);
const range = (start, end) => {
  const result = [];
  for (let i = start; i < end; i++) {
    result.push(i);
  }
  return result;
};

// eslint-disable-next-line arrow-body-style
const disabledDate = (current) => {
  // Can not select days before today and today
  return current && current < dayjs().endOf('day');
};
const disabledDateTime = () => ({
  disabledHours: () => range(0, 24).splice(4, 20),
  disabledMinutes: () => range(30, 60),
  disabledSeconds: () => [55, 56],
});

// 下拉
const handleChange = (value) => {
  console.log(`selected ${value}`);
};
// 日期
const onChange = (date, dateString) => {
  console.log(date, dateString);
};

export default function Newapp() {
  const { Search } = Input;
  const onSearch = (value) => console.log(value);
  return (
    <>
      <div className="topBut">
        <Button>保存</Button>
        <Button>保存且新增</Button>
        <Button>草稿箱</Button>
        <span className="spans"></span>
        <Button>导入</Button>
      </div>
      <div className="rksqbox">
        <div
          style={{
            paddingTop: '1rem',
            fontSize: '1.5rem',
            textAlign: 'center',
          }}
        >
          人员信息
        </div>
        {/* 基本信息 */}
        <div className="tables">
          <table border={1}>
            <tr className="trs">
              <td colspan={8} style={{ textAlign: 'left', padding: '.3rem' }}>
                基本信息
              </td>
            </tr>
            <tr>
              <td>档案编号:</td>
              <td colSpan={2}>
                <Input placeholder="保存后自动生成" readOnly />
              </td>
              <td>登陆账号:</td>
              <td colSpan={2}>
                <Input />
              </td>
              <td rowSpan={11}>证件照-宽200px，高215px：</td>
              <td rowSpan={11}>
                <div style={{ float: 'left' }}>
                  <Button
                    size="small"
                    style={{
                      backgroundColor: '#f2f9ff',
                      color: 'black',
                      marginRight: '.2rem',
                    }}
                  >
                    上传...
                  </Button>
                  <Button
                    size="small"
                    style={{ backgroundColor: '#f2f9ff', color: 'black' }}
                  >
                    清空
                  </Button>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <span style={{ color: 'red' }}>*</span>
                真实姓名:
              </td>
              <td colSpan={2}>
                <Input />
              </td>
              <td>性别:</td>
              <td colSpan={2}>
                <Select
                  defaultValue="1"
                  style={{
                    width: '100%',
                  }}
                  onChange={handleChange}
                  options={[
                    {
                      value: 'nan',
                      label: '男',
                    },
                    {
                      value: 'nv',
                      label: '女',
                    },
                  ]}
                />
              </td>
            </tr>
            <tr>
              <td>出生日期:</td>
              <td colSpan={2}>
                <DatePicker onChange={onChange} style={{ width: '100%' }} />
              </td>
              <td>身份证号码:</td>
              <td colSpan={2}>
                <Input />
              </td>
            </tr>
            <tr>
              <td>政治面貌:</td>
              <td colSpan={2}>
                <Select
                  defaultValue="1"
                  style={{
                    width: '100%',
                  }}
                  onChange={handleChange}
                  options={[
                    {
                      value: '1',
                      label: '群众',
                    },
                    {
                      value: '2',
                      label: '中共党员',
                    },
                    {
                      value: '4',
                      label: '中共预备党员',
                    },
                    {
                      value: '5',
                      label: '共青团员',
                    },
                    {
                      value: '6',
                      label: '民革党员',
                    },
                  ]}
                />
              </td>
              <td>婚姻状况:</td>
              <td colSpan={2}>
                <Select
                  defaultValue="1"
                  style={{
                    width: '100%',
                  }}
                  onChange={handleChange}
                  options={[
                    {
                      value: '1',
                      label: '未婚',
                    },
                    {
                      value: '2',
                      label: '已婚',
                    },
                    {
                      value: '4',
                      label: '丧偶',
                    },
                    {
                      value: '5',
                      label: '离异',
                    },
                    {
                      value: '6',
                      label: '未知',
                    },
                  ]}
                />
              </td>
            </tr>
            <tr>
              <td>国籍:</td>
              <td colSpan={2}>
                <Input />
              </td>
              <td>籍贯:</td>
              <td colSpan={2}>
                <Input />
              </td>
            </tr>
            <tr>
              <td>民族:</td>
              <td colSpan={2}>
                <Select
                  defaultValue="1"
                  style={{
                    width: '100%',
                  }}
                  onChange={handleChange}
                  options={[
                    {
                      value: '1',
                      label: '汉族',
                    },
                    {
                      value: '2',
                      label: '蒙古族',
                    },
                    {
                      value: '4',
                      label: '满族',
                    },
                    {
                      value: '5',
                      label: '朝鲜族',
                    },
                    {
                      value: '6',
                      label: '赫哲族',
                    },
                  ]}
                />
              </td>
              <td>户口性质:</td>
              <td colSpan={2}>
                <Select
                  defaultValue="1"
                  style={{
                    width: '100%',
                  }}
                  onChange={handleChange}
                  options={[
                    {
                      value: '1',
                      label: '城镇户口',
                    },
                    {
                      value: '2',
                      label: '农业户口',
                    },
                  ]}
                />
              </td>
            </tr>
            <tr>
              <td>
                <span style={{ color: 'red' }}>*</span>
                联系电话:
              </td>
              <td colSpan={2}>
                <Input />
              </td>
              <td>电子邮箱:</td>
              <td colSpan={2}>
                <Input />
              </td>
            </tr>
            <tr>
              <td>微信号:</td>
              <td colSpan={2}>
                <Input />
              </td>
              <td>QQ号:</td>
              <td colSpan={2}>
                <Input />
              </td>
            </tr>
            <tr>
              <td>紧急联系人:</td>
              <td colSpan={2}>
                <Input />
              </td>
              <td>紧急联系人电话:</td>
              <td colSpan={2}>
                <Input />
              </td>
            </tr>
            <tr>
              <td>户口地址:</td>
              <td colSpan={5}>
                <Input />
              </td>
            </tr>
            <tr>
              <td>家庭住址:</td>
              <td colSpan={5}>
                <Input />
              </td>
            </tr>
            <tr>
              <td>提示：</td>
              <td colSpan={7}>
                <div
                  style={{ width: '100%', float: 'left', textAlign: 'left' }}
                >
                  1，新建用户时，系统会自动创建对应的档案信息，然后在人员档案列表里选择档案进行资料完善；
                  <br />
                  2，只需要录入人员档案信息，不需要给他创建系统登录账号时，才在这里新建，注意不要重复创建。
                </div>
              </td>
            </tr>
          </table>
        </div>
        {/* 入职信息 */}
        <div className="rkmxbox">
          <table border={1}>
            <tr className="trs">
              <td colspan={9} style={{ textAlign: 'left', padding: '.3rem' }}>
                入职信息
              </td>
            </tr>
            <tr>
              <td>入职时间:</td>
              <td colSpan={2}>
                <DatePicker onChange={onChange} style={{ width: '100%' }} />
              </td>
              <td>转正日期:</td>
              <td colSpan={2}>
                <DatePicker onChange={onChange} style={{ width: '100%' }} />
              </td>
              <td>离职时间</td>
              <td colSpan={2}>
                <DatePicker onChange={onChange} style={{ width: '100%' }} />
              </td>
            </tr>
            <tr>
              <td>所在部门:</td>
              <td colSpan={2}>
                <Select
                  defaultValue="1"
                  style={{
                    width: '100%',
                  }}
                  onChange={handleChange}
                  options={[
                    {
                      value: '1',
                      label: '总经办',
                    },
                    {
                      value: '2',
                      label: '经营部',
                    },
                  ]}
                />
              </td>
              <td>所在岗位:</td>
              <td colSpan={2}>
                <Select
                  defaultValue="1"
                  style={{
                    width: '100%',
                  }}
                  onChange={handleChange}
                  options={[
                    {
                      value: '1',
                      label: '总经理',
                    },
                    {
                      value: '2',
                      label: '副总经理',
                    },
                  ]}
                />
              </td>
              <td>
                {' '}
                <span style={{ color: 'red' }}> *</span> 直接上级
              </td>
              <td colSpan={2}>
                <Search
                  onSearch={onSearch}
                  style={{
                    width: '100%',
                  }}
                />
              </td>
            </tr>
            <tr>
              <td>银行开户行：</td>
              <td colSpan={2}>
                <Input />
              </td>
              <td>开户名：</td>
              <td colSpan={2}>
                <Input />
              </td>
              <td>银行卡号:</td>
              <td colSpan={2}>
                <Input />
              </td>
            </tr>
            <tr>
              <td>社保卡号：</td>
              <td colSpan={2}>
                <Input />
              </td>
              <td>公积金号：</td>
              <td colSpan={2}>
                <Input />
              </td>
              <td>工作排班:</td>
              <td colSpan={2}>
                <Select
                  defaultValue="1"
                  style={{
                    width: '100%',
                  }}
                  onChange={handleChange}
                  options={[
                    {
                      value: '1',
                      label: '正常班',
                    },
                    {
                      value: '2',
                      label: '早班',
                    },
                    {
                      value: '3',
                      label: '中班',
                    },
                    {
                      value: '4',
                      label: '晚班',
                    },
                  ]}
                />
              </td>
            </tr>
            <tr>
              <td>职称等级:</td>
              <td colSpan={2}>
                <Select
                  defaultValue="1"
                  style={{
                    width: '100%',
                  }}
                  onChange={handleChange}
                  options={[
                    {
                      value: '1',
                      label: '初级职称',
                    },
                    {
                      value: '2',
                      label: '中级职称',
                    },
                    {
                      value: '3',
                      label: '高级职称',
                    },
                  ]}
                />
              </td>
              <td>员工类型:</td>
              <td colSpan={2}>
                <Select
                  defaultValue="1"
                  style={{
                    width: '100%',
                  }}
                  onChange={handleChange}
                  options={[
                    {
                      value: '1',
                      label: '全职',
                    },
                    {
                      value: '2',
                      label: '兼职',
                    },
                    {
                      value: '3',
                      label: '实习',
                    },
                    {
                      value: '4',
                      label: '劳务外包',
                    },
                    {
                      value: '5',
                      label: '劳务派遣',
                    },
                    {
                      value: '6',
                      label: '退休返聘',
                    },
                  ]}
                />
              </td>
              <td>员工状态:</td>
              <td colSpan={2}>
                <Select
                  defaultValue="1"
                  style={{
                    width: '100%',
                  }}
                  onChange={handleChange}
                  options={[
                    {
                      value: '1',
                      label: '正式',
                    },
                    {
                      value: '2',
                      label: '适用',
                    },
                    {
                      value: '3',
                      label: '离职',
                    },
                  ]}
                />
              </td>
            </tr>
          </table>
        </div>
        <div className="fujian">
          <table border={1}>
            <tr>
              <td colspan={26}>
                教育经历 &nbsp; <Button>增行</Button> &nbsp;
                <Button>删行</Button>
                &nbsp; <Button>导入</Button>
                &nbsp; <Button>导入模板</Button>
              </td>
            </tr>
            <tr>
              <td> 序号</td>
              <td colSpan={5}>开始时间</td>
              <td colSpan={5}>结束时间</td>
              <td colSpan={5}>学校名称</td>
              <td colSpan={5}>专业</td>
              <td colSpan={5}>学历</td>
            </tr>

            <tr>
              <td> 1</td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
            </tr>
            <tr>
              <td> 2</td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
            </tr>
            <tr>
              <td> 3</td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
            </tr>
            <tr>
              <td> 4</td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
            </tr>
            <tr>
              <td> 5</td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
            </tr>
            <tr>
              <td> 6</td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
            </tr>
            <tr>
              <td> 7</td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
            </tr>
            <tr>
              <td> 8</td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
            </tr>
          </table>
        </div>
        <div className="fujian">
          <table border={1}>
            <tr>
              <td colspan={31}>
                工作 经历 &nbsp; <Button>增行</Button> &nbsp;
                <Button>删行</Button>
                &nbsp; <Button>导入</Button>
                &nbsp; <Button>导入模板</Button>
              </td>
            </tr>
            <tr>
              <td> 序号</td>
              <td colSpan={5}>开始时间</td>
              <td colSpan={5}>结束时间</td>
              <td colSpan={5}>工作单位</td>
              <td colSpan={5}>所在部门</td>
              <td colSpan={5}>工作内容</td>
              <td colSpan={5}>离职原因</td>
            </tr>
            <tr>
              <td> 1</td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
            </tr>
            <tr>
              <td> 2</td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
            </tr>
            <tr>
              <td> 3</td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
            </tr>
            <tr>
              <td> 4</td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
            </tr>
            <tr>
              <td> 5</td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
              <td colSpan={5}></td>
            </tr>
          </table>
        </div>
        <div className="fujian1">
          <table border={1}>
            <tr>
              <td colspan={14}>
                简历上传 &nbsp; <Button>批量上传</Button>{' '}
              </td>
            </tr>
            <tr>
              <td colSpan={6}> 文件名称</td>
              <td>文件大小</td>
              <td>上传人</td>
              <td colSpan={2}>上传时间</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr style={{ backgroundColor: 'white' }}>
              <td colspan={14} style={{ height: '4rem' }}></td>
            </tr>
          </table>
        </div>
      </div>
    </>
  );
}
